<#include "../../components/cc-var.ftl" />
<#include "../../components/cc-key-value.ftl" />
<#include "../../components/cc-header-url-tabs.ftl" />
<#include "../../components/cc-json-convert-url-param-el.ftl" />
<#include "../../components/cc-keyval-convert-url-param-el.ftl" />
<#include "../../components/cc-url-param-convert-json-el.ftl" />
<#include "mock-test-api-form.ftl" />
<#include "layout-convert-form.ftl" />
<#include "keyval-convert-json-form.ftl" />
<#include "json-convert-keyval-form.ftl" />
<#include "dmp-check-response.ftl"/>
<#include "dmp-check-home.ftl"/>
<#include "dmp-check-main.ftl" />
<#include "dmp-check-step.ftl" />
<#include "home-header-convert.ftl" />
<#include "cache-update-form.ftl" />
<script type="text/x-template" id="internal-api-upsert">
    <div class="switcher-btn">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="后台接口测试" name="adminMock">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">后台保存接口测试-仅本地/beat环境测试</p>
                    <mock-test-api-form/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="管理后台内部接口" name="adminApi">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">主页dmp日志kafka消费开关</p>
                    <el-form :inline="true" label-width="180px" label-position="left">
                        <el-switch
                                v-model="isHomeDmpSwitcherOn"
                                @change="handleToggleSwitch"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="接口内部接口" name="interfaceApi">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">根据资源ID和类型生成缓存</p>
                    <cache-update-form/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="key:val->Json" name="keyValConvertJson">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">多行key:val->Json格式</p>
                    <keyval-convert-json-form/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Json->key:val" name="jsonConvertKeyVal">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">Json->key:val</p>
                    <json-convert-keyval-form/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="dmp排查流程" name="dmpCheck">
                <div class="switcher-btn-wrapper">
                    <dmp-check-main/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="url参数->Json" name="url2Json">
                <div class="switcher-btn-wrapper">
                    <cc-url-param-convert-json-el/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="key:val->url参数" name="keyVal2Url">
                <div class="switcher-btn-wrapper">
                    <cc-keyval-convert-url-param-el/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Json->url参数" name="json2Url">
                <div class="switcher-btn-wrapper">
                    <cc-json-convert-url-param-el/>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</script>

<script>
    Vue.component('internal-api-upsert', {
        template: '#internal-api-upsert',
        data() {
            return {
                activeTab: 'adminMock',
                isHomeDmpSwitcherOn:undefined,
                urls: {
                    getSwitchStatus: '/v1/homeDmpLog/getSwitchStatus.html',
                    switcherStatus: '/v1/homeDmpLog/switcherStatus.html',
                }
            }
        },
        methods: {
            handleToggleSwitch(newVal) {
                this.$confirm('确定' + (this.isHomeDmpSwitcherOn ? '开启' : '关闭') + '吗？')
                        .then(function () {
                            this.ajax(this.urls.switcherStatus, {
                                value: this.isHomeDmpSwitcherOn ? 1 : 0
                            }, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                    this.isHomeDmpSwitcherOn = result.data.value === 1
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }.bind(this))
                        .catch(function () {
                        })
            },
            getHomeDmpSwitcherInfo() {
                this.ajax(this.urls.getSwitchStatus,{}, function (data) {
                    if (data.code == 0) {
                        this.isHomeDmpSwitcherOn = data.data.value === 1 ;
                    }
                }.bind(this))
            },
            handleNoParamsRequest(url) {
                this.$confirm('确定操作吗？')
                        .then(function () {
                            this.ajax(url, {}, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }.bind(this))
                        .catch(function () {

                        })
            },
            handleInitUi8(url) {
                this.$confirm('确定操作吗？')
                        .then(function () {
                            this.ajax(url, {}, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }.bind(this))
                        .catch(function () {

                        })
            },
            handleSetBoard(url) {
                this.$confirm('确定操作吗？')
                        .then(function () {
                            this.ajax(url, {}, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }.bind(this))
                        .catch(function () {

                        })
            },
            handleClear(url) {
                this.$confirm('确定操作吗？')
                        .then(function () {
                            this.ajax(url, {}, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }.bind(this))
                        .catch(function () {

                        })
            },
            handleInitMergePost(url) {
                this.$confirm('确定操作吗？')
                        .then(function () {
                            this.ajax(url, {}, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }.bind(this))
                        .catch(function () {

                        })
            }
        },
        watch: {
        },
        created() {
            this.getHomeDmpSwitcherInfo()
        }
    })

</script>
<style>
    .switcher-btn .el-form--inline > .cc-var {
        display: inline-block;
        margin-right: 40px;
    }

    .switcher-btn-wrapper {
        border: 1px dashed #ccc;
        margin: 20px 20px 40px 20px;
        padding: 0 20px;
    }

    .switcher-btn-wrapper .switcher-title {
        background: #fff;
        position: relative;
        top: -10px;
        display: inline-block;
        padding: 0 10px;
        font-size: 20px;
        font-weight: bold;
    }

    .switcher-btn-wrapper .switcher-title span {
        margin: 0 10px;
        font-size: 14px;
        font-weight: normal;
    }
</style>